<template>
  <div class="content">

    <div class="workbench">
      <div class="worktop border_style bg_style">
        <div class="workinput">
          <div style="margin-right:8px">
            <YsInput type="text" class="search-input" clearable v-model="pege_param.query_keyword" @keydown.enter.native="getTenantList" placeholder="请输入关键字">
            </YsInput>
          </div>
          <div>
            <YsButton type="primary" class="searchBtn" @click="getTenantList()">查询</YsButton>
          </div>
        </div>
      </div>
      <div class="table-box border_style bg_style">
        <proTable ref="proTableDom" class=" border01" :loading="page.tableLoad" :columns="page.columns" :data="page.data" @clickPage="onClickPage" :current="page.currentPage" :total="page.allTotal" :pageSize="page.pageSize"></proTable>
      </div>
    </div>
    <pro-dialog class="add-serve" ref="detailDom" width="960" :nopadding="true" :title="`查看详情`">
      <div class="model-box" style="padding:32px">
        <YsForm ref="formServerValidate" :model="enter_detail" label-position="top">
          <YsRow :gutter="16">
            <YsCol span="12">
              <YsFormItem label="用户名">
                <YsInput size="large" :disabled="true" v-model="enter_detail.user_cn_name"></YsInput>
              </YsFormItem>
            </YsCol>
            <YsCol span="12">
              <YsFormItem label="公司名称">
                <YsInput size="large" :disabled="true" v-model="enter_detail.dept_full_cname"></YsInput>
              </YsFormItem>
            </YsCol>
          </YsRow>
          <YsRow :gutter="16">
            <YsCol span="12">
              <YsFormItem label="联系电话">
                <YsInput size="large" :disabled="true" v-model="enter_detail.dept_contcat"></YsInput>
              </YsFormItem>
            </YsCol>
            <YsCol span="12">
              <YsFormItem label="地址">
                <YsInput size="large" :disabled="true" v-model="enter_detail.dept_address"></YsInput>
              </YsFormItem>
            </YsCol>
          </YsRow>
          <YsRow :gutter="16">
            <YsCol span="12">
              <YsFormItem label="邮箱地址">
                <YsInput size="large" :disabled="true" v-model="enter_detail.dept_email"></YsInput>
              </YsFormItem>
            </YsCol>
            <YsCol span="12">
              <YsFormItem label="更新时间">
                <YsInput size="large" :disabled="true" v-model="enter_detail.update_time"></YsInput>
              </YsFormItem>
            </YsCol>
          </YsRow>
        </YsForm>
        <YsRow class="foot-btn" style="margin-top:10px">
          <YsButton @click="handleclose()">关闭</YsButton>
        </YsRow>
      </div>
    </pro-dialog>
  </div>
</template>

<script>
// import TeadTitle from "../../components/Main/headTitle.vue";
import { mapGetters, mapActions } from "vuex";
export default {
  name: "application",
  components: {
    // TeadTitle,
  },
  computed: {
    ...mapGetters(["getTabList", "getServiceStepList"]),
  },
  data() {
    return {
      form_server: {
        input: ""
      },
      pege_param: {
        query_keyword: "",
        start_recd: 1,//开始数据
        limit_recd: 10,//查询的条数
      },

      formTop: {
        input1: "",
        input2: "",
      },
      page: {
        tableLoad: false,
        pickerDisabled: null,//判断是编辑还是查看详情
        subDetailBean: {}, //查看详情
        allTotal: 0,
        pageSize: 10,
        currentPage: 1,
        columns: [
          {
            title: "编号",
            key: "enter_code",
            minWidth: 80,
            tooltip: true
          },
          {
            title: "状态",
            key: "dept_state",
            minWidth: 80,
            tooltip: true,
            render: (h, params) => {
              if (params.row.dept_state == 1) {
                return h('span', { class: 'setStyle1' }, '通过')
              } else if (params.row.dept_state == 2) {
                return h('span', { class: 'setStyle2' }, '拒绝')
              } else {
                return h('span', { class: 'setStyle2' }, '待审批')
              }
            }
          },
          {
            title: "租户名称",
            minWidth: 100,
            key: "dept_full_cname",
            tooltip: true
          },
          {
            title: "更新时间",
            key: "update_time",
            minWidth: 100,
            tooltip: true
          },

          {
            title: "操作",
            width: 150,
            // align: "center",
            render: (h, params) => {
              let _this = this;

              return h("div", [
                h("span", {
                  domProps: {
                    innerText: "通过",
                  },
                  class: "textColor",
                  on: {
                    click: (event) => {
                      _this.taskApprovalList(params.row, 1);
                      event.stopPropagation();
                    },
                  },
                }),
                h("span", {
                  domProps: {
                    innerText: "查看",
                  },

                  class: "textColor",
                  on: {
                    click: (event) => {
                      _this.taskDetailList(params.row);
                      event.stopPropagation();
                    },
                  },
                }),
                h("span", {
                  domProps: {
                    innerText: "拒绝",
                  },

                  class: "textColor2",
                  on: {
                    click: (event) => {
                      _this.taskApprovalList(params.row, 2);
                      event.stopPropagation();
                    },
                  },
                }),
              ]);

            },
          },
        ],
        data: [],
      },
      enter_detail: {}
    };
  },

  methods: {
    ...mapActions(['getenterQuery', 'getEnterDetail', 'setEnterExa']),
    //获取服务列表
    getTenantList() {
      let _this = this
      this.page.tableLoad = true
      _this.getenterQuery(this.pege_param).then(res => {
        let { data, msg, scode, status } = res;

        _this.page.tableLoad = false
        if (status === 'ok') {
          this.page.data = data.enterDeptInfos
          this.page.allTotal = data.all_recd
        } else {
          _this.$YsMessage.error(msg);
        }
      }).catch(err => {
        _this.page.tableLoad = false
        _this.$YsMessage.error('获取数据失败');
      })
    },
    //分页
    onClickPage(pageNum) {
      this.page.currentPage = pageNum;
      this.pege_param.start_recd = pageNum
      this.getTenantList()
    },
    //审批状态
    taskApprovalList(item, num) {
      let _this = this
      _this.setEnterExa({ enterDeptInfo: { id: item.id, enter_type: item.enter_type, dept_state: num } }).then(res => {
        let { data, msg, scode, status } = res;
        if (status === 'ok') {
          _this.$YsMessage.success(data.message_text);
          this.getTenantList()
        } else {
          _this.$YsMessage.error(msg);
        }
      }).catch(err => {
        _this.$YsMessage.error('审批失败');
      })
    },
    //查看详情
    taskDetailList(item) {
      let _this = this
      this.enter_detail = {}
      _this.$refs.detailDom.show()
      _this.getEnterDetail({ enter_id: item.id }).then(res => {
        let { data, msg, scode, status } = res;
        if (status === 'ok') {
          this.enter_detail = data.enterDetail
        } else {
          _this.$YsMessage.error(msg);
        }
      }).catch(err => {
        _this.$YsMessage.error('审批失败');
      })
    },
    //关闭弹窗
    handleclose() {
      this.$refs.detailDom.close()
    }
  },
  mounted() {
    this.getTenantList()
  },
};
</script>
<style lang="less" scoped>
.content {
  width: 100%;
  height: 100%;
  // padding: 0 18px;
  /deep/ .workRooter {
    p {
      color: #405680;
      font-size: 16px !important;
    }
  }
  .workbench {
    width: 100%;
    height: calc(100% - 28px);
    // padding: 18px;
    padding-bottom: 0;

    .worktop {
      display: flex;
      align-items: center;
      padding: 0 16px;
      height: 72px;
      border: 1px solid #cfd7e5;
      border-radius: 4px;
      margin-bottom: 8px;

      .workright {
        margin-left: auto;
      }
      .workinput {
        display: flex;
      }
    }
    .dividing-right {
      .current {
        background: #0061ff !important;
        color: #fff !important;
      }
      margin-left: auto;
      .dividing-btn {
        width: 140px;
        height: 40px;
        background: #ffffff;
        border: 1px solid #0061ff;
        opacity: 1;
        padding: 0;
        color: #0091ff;
        border-radius: 4px;
      }
      .dividing-btn2 {
        margin-left: 10px;
      }
    }
  }
  .table-box {
    width: 100%;
    height: calc(100% - 68px);
    border: 1px solid #cfd7e5;
    border-radius: 4px
  }
}
.model-box {
  .icon-chain {
    width: 48px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    margin: 25px auto 0;

    background: rgba(0, 97, 255, 0.1);
    border: 1px solid #0061ff;
    opacity: 1;
    border-radius: 4px;
    .icon {
      font-size: 40px;
      color: #0061ff;
    }
  }
  .formconter {
    padding: 0 16px;
    /deep/.ivu-form-item {
      width: 100%;
    }
  }
}
/deep/.model-tabs {
  border: 1px solid #cfd7e5;
  border-radius: 2px;
  margin: 20px;
  .ivu-tabs-bar {
    background: #f5f7fa;
    border-bottom-color: transparent;
    margin-bottom: 22px;
  }
  .ivu-tabs-tabpane {
    background: transparent;
  }
  .ivu-input[disabled] {
    color: #405680;
  }
}

/deep/ .textColor {
  // color: '#0091FF';
  cursor: pointer;
  color: #0091ff;
  margin-right: 8px;
  &:hover {
    opacity: 0.8;
  }
}
/deep/ .textColor2 {
  // color: '#0091FF';
  color: #0091ff;
  cursor: pointer;
  &:hover {
    opacity: 0.8;
    // color: #d53939;
  }
}
.searchBtn {
  width: 80px;
  min-width: 80px;
  height: 40px;
  font-family: PingFang SC;
}
</style>
